<template>
  <div>
    <!-- 顶栏 -->
    <div class="header">
      <div style="width: 1190px; margin: 0 auto">
        <a href="/login" class="hd_nav">亲，请登录</a>
        &nbsp;&nbsp;
        <a href="/register" class="hd_nav">免费注册</a>
        <div style="float: right">
          <a href="/myorder" class="hd_nav">我的订单</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/" class="hd_nav">我的就爱</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/admin/asd" class="hd_nav">就爱卖家中心</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">联系客服</a>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- 头部 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
        <!-- 搜索框 -->
        <div class="search">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            type="text"
            clearable
          >
            <el-button
              id="frame"
              slot="append"
              icon="el-icon-search"
              @click="select"
            ></el-button>
          </el-input>
          <el-badge class="shopping_cart">
            <el-button
              type="mini"
              style="
                color: #e1251b;
                font-size: 15px;
                background: rgba(255, 0, 0, 0);
              "
              icon="el-icon-shopping-cart-full"
              class="btn"
              @click="goshoppingcart"
              >我的购物车</el-button
            >
          </el-badge>
        </div>
      </div>

      <!-- 主体 -->
      <el-main class="main">
        <el-card v-show="commodity != '抱歉，店小二没找到您要的商品'">
          <!-- 商品 -->
          <div class="commodity">
            <el-row
              :gutter="5"
              type="flex"
              justify="center"
              style="flex-wrap: wrap"
            >
              <el-col :span="4.8" v-for="item in commodity" :key="item.id">
                <el-card class="item">
                  <div @click="goCommodityDetails(item.commodityId)">
                    <!-- 商品图片 -->
                    <div>
                      <img
                        :src="'http://localhost:5000' + item.surfacePlot"
                        alt=""
                        class="commodity_img"
                      />
                    </div>
                    <!-- 商品标题 -->
                    <h4>{{ item.commodityName }}</h4>
                  </div>
                  <p class="info">
                    <span class="price"> <em>¥</em>{{ item.money }} </span>
                    <span class="sales">{{ item.sales }}人购买</span>
                  </p>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="paging">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[30, 60, 90, 120]"
              :page-size="30"
              layout="total, sizes, prev, pager, next, jumper"
              :total="10"
            >
            </el-pagination>
          </div>
        </el-card>
        <el-empty
          :image-size="200"
          v-show="commodity == '抱歉，店小二没找到您要的商品'"
        ></el-empty>
      </el-main>
    </div>

    <!-- 底部 -->
    <el-footer>
      <!-- 版权声明、备案信息 -->
      <div class="copyright">
        <span style="margin-left: 50px">
          Copyright 2021 9iMall. All Rights Reserved 就爱商城 版权所有
        </span>
        <span style="margin-left: 50px">
          <a href="https://beian.miit.gov.cn/" target="_blank">
            晋ICP备2020012685号-1</a
          >
          &nbsp;|&nbsp;
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351228"
            ><img
              class="record_ico"
              src="https://cdn.jsdelivr.net/gh/XueChenda/blog_imgs/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            />
            闽公网安备 35080202351228号</a
          >
        </span>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { selectcommidityspecification } from "../../api/select";
export default {
  data() {
    return {
      // 商品
      commodity: [],
      input: "",
      currentPage: 1,
    };
  },
  methods: {
    goshoppingcart() {
      this.$router.push("/shoppingcart");
    },
    select() {
      selectcommidityspecification(this.input)
        .then((data) => {
          console.log(data.data);
          this.commodity = data.data;
          var query = { key: this.input };
          this.$router.push({ path: "/search", query: query });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    goCommodityDetails(id) {
      this.$router.push({
        path: "/CommodityDetails",
        query: { key: id },
      });
    },
  },
  mounted() {
    this.input = this.$route.query.key;
    this.select();
  },
};
</script>

<style scoped>
/* 顶栏 */
.header {
  height: 35px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
}

.hd_nav:hover {
  color: #ff5000;
}

/* 容器 */
.container {
  width: 1190px;
  margin: 0 auto;
}

/* 头部 */
.top {
  padding-top: 24px;
  height: 98px;
}

/* Logo */
.logo {
  width: 190px;
  height: 80px;
  float: left;
  /* margin-top: 8px; */
  margin: 8px 0 0 20px;
}
.logo:hover {
  cursor: pointer;
}

/* 搜索框 */
.search {
  margin-left: 350px;
  line-height: 80px;
  width: 600px;
}

/* 选择框 */
.el-select {
  width: 80px;
  background-color: #fff;
}

/* 搜索按钮 */
#frame {
  background-color: #ff5000;
  font-size: 15px;
  border-radius: 1;
  color: #f5f5f5;
}

/* 购物车 */
.shopping_cart {
  margin-top: -164px;
  margin-left: 630px;
}

.btn {
  font-size: 20px;
  display: flex;
  align-items: center;
  border: 1.5px solid rgba(255, 0, 0, 0.2);
}

.btn >>> i {
  font-size: 25px;
}

.btn:hover {
  border: 1.5px solid #ff5000;
}

/* 主体 */
.main {
  min-height: calc(100vh - 120px);
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
}

/* 卡片内边距 */
.el-card >>> .el-card__body {
  padding: 0;
}

.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}

/* 商品 */
.item {
  padding: 8px;
  margin: 2px auto;
}
.item:hover {
  cursor: pointer;
}

/* 商品图片 */
.commodity_img {
  height: 215px;
  width: 215px;
  border-radius: 20px;
}

/* 商品标题 */
h4 {
  margin-top: 9px;
  margin-bottom: 0;
  line-height: 22px;
  height: 44px;
  width: 215px;
  color: #111111;
  font-weight: normal;
  overflow: hidden;
}

/* 商品信息 */
.info {
  margin-top: 11px;
  height: 22px;
  line-height: 22px;
  vertical-align: bottom;
  border-radius: 0 0 12px 12px;
}

/* 商品价格 */
.price {
  float: left;
  color: #f40;
  font-size: 20px;
  height: 22px;
  line-height: 22px;
}

em {
  font-style: normal;
  font-size: 12px;
  vertical-align: inherit;
}

/* 已购 */
.sales {
  height: 26px;
  line-height: 26px;
  vertical-align: bottom;
  margin-left: 4px;
  color: #999;
  font-size: 14px;
}

.paging {
  text-align: center;
  margin: 28px;
}

/* 底部 */
.el-footer {
  text-align: center;
  line-height: 60px;
  margin: 35px auto;
  background-color: white;
}

/* 版权声明、备案信息 */
.copyright {
  color: #58666e;
  margin-left: 0;
}

/* 备案图标 */
.record_ico {
  vertical-align: middle;
}
</style>
